import axios from 'axios';
import React, { useState, useEffect } from 'react'
import { Route, Switch, Link } from 'react-router-dom'
import Collect from './Collect'
import Museum from './Museum';
import './Content2.css'
import Header from '../components/Header';

const Home = () => {
    const [list, setList] = useState([]);
    useEffect(() => {
        const url = "http://192.168.72.166:8080/api/getShowDatas";
        axios.get(url).then(res => {
            const data = res.data.data;
            console.log(data)
            data.forEach((item) => {
                let name = "http://192.168.72.166:8080/" + item.show_name;
                setList((list) => [
                    ...list,
                    {
                        name: name,
                        id: item.show_id,
                        token: item.show_token
                    }
                ])

            });

        })
    }, [])
    return (
        <div>
            <Header />
            <div className='content2'>
                <div className='content2_1'>
                    <div className='content2_2'>
                        <div className='content2_2_1'>
                            {
                                list.map(item => {
                                    if (item.token == '首页已登录轮') {
                                        return (
                                            <img src={item.name} key={item.id} style={{ float: 'left', width: '730px', height: '500px' }} />
                                        )
                                    }
                                })
                            }
                        </div>
                    </div>
                    <div className='content2_3'>
                        {
                            list.map(item => {
                                if (item.token == '首页已登录展') {
                                    const name = item.name.split('/')[3].split('.')[0];
                                    if (name == '产品征集') {
                                        return (
                                            <div className='content2_3_1'>
                                                <Link to='/home/collect'>
                                                    <img src={item.name} style={{ position: 'absolute', width: '350px', height: '230px', borderRadius: '50px' }} />
                                                    <p>{name}</p>
                                                </Link>
                                            </div>
                                        )
                                    } else {
                                        return (
                                            <div className='content2_3_1'>
                                                <img src={item.name} style={{ position: 'absolute', width: '350px', height: '230px', borderRadius: '50px' }} />
                                                <p>{name}</p>
                                            </div>
                                        )
                                    }

                                }
                            })
                        }
                    </div>
                </div>
                <Link to="/work"><button className='content2_4'>进入工作台</button></Link>
            </div>
        </div>
    )
}



const Content2 = () => {
    return (
        <div >
            <Switch>
                <Route path="/home/collect/museum"><Museum /></Route>
                <Route path="/home/collect"><Collect /></Route>
                <Route path="/home"><Home /></Route>
            </Switch>

        </div>

    )
}

export default Content2